<template>
  <div class="banner">
        <div class="img">
            <img :src="this.$store.state.arr2.litimg" alt="请稍等" class="tu">
        </div>
      <div class="bgbn">
          <div class="top">
              <h2>{{this.$store.state.arr2.name}}</h2>
                <p class="miao">
                    <strong>{{this.$store.state.arr2.number}}</strong>张图片
                    <i :style="img"></i>
                    <span :style="img"></span>
                </p>
          </div>
          <div class="more">
              <p class="date"> 过去24小时<br> <em>{{this.$store.state.arr2.personNum}}</em>人用<i>马蜂窝</i>在旅行 </p>
              <span>查看足迹</span>
          </div>
      </div>
  </div>
</template>

<script>
// import {homelink} from "@/api/homeapi.js"
export default {
    data(){
        return {
            img:{backgroundImage: "url(" + require("sta/mdd.png") + ")"}
        }
    }
}
</script>

<style scoped>
    .banner{
        width: 100%;
        position: relative;
    }
    img{
        width: 100%;
    }
    .bgbn{
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 4rem;
        padding: 0 0.45rem;
        padding-top: 0.5rem;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0,0,0,.7);
        box-sizing: border-box;
    }
    h2{
        font-size: 0.75rem;
        color: #fff;
        margin-bottom: 0.22rem;
    }
    .miao strong{
        font-size: 0.35rem;
        line-height: 0.35rem;
    }
    .miao{
        font-size: 0.35rem;
        line-height: 0.35rem;
    }
    .miao span{
        display: inline-block;
        width: 0.2rem;
        height: 0.25rem;
        background: url(/img/mdd.png) no-repeat;
        background-size: 50px;
        background-position: -25px -3px;
        margin: -1px 0 0 7px;
    }
    .miao i{
        float: left;
        width: 0.4rem;
        height: 0.35rem;
        background: url(/img/mdd.png) no-repeat;
        background-size: 50px;
        background-position: -1px -1px;
        margin-left: 0.1rem;
    }
    .top{
        padding-bottom: 0.3rem;
        border-bottom: 1px solid rgba(255,255,255,.6);
    }
    .date{
        width: 50%;
        margin-top: 0.2rem;
        font-size: 0.3rem;
        line-height: 0.5rem;
        float: left;
    }
    .date em{
        font-size: 0.4rem;
    }
    .date i{
        font-style: normal;
        padding: 0 5px;
        color: #ffde40;
    }
    .more span{
        float: right;
        color: #ffde40;
        margin-top: 0.4rem;
        font-size: 0.35rem;
    }
    .img{
        width: 100%;
        height: 5.45rem;
    }
</style>